<template>
	<view class="inner">
        <view v-if="data.name" class="pt30 pb20 mb10">
            《一念永恒》 - {{data.name}}
	    </view>
        
		<!-- <mo-virtual-scroller 
		ref="scroller" 
        flex
		:list="data.chapters" 
		itemKey="order">
			<template #header>
				<view class="pt30 pb20">《一念永恒》</view>
			</template>
			<template v-slot="{ data }">
				<view class="pb30" @click="toDetail(data)">
					<view class="scroll-item">{{ data.title }}</view>
				</view>
			</template>
			<template #bottom>
				<view  v-if="!data.name" class="tc gray f26 pt10">加载中...</view>
			</template>
		</mo-virtual-scroller> -->

        <view  v-if="!data.name" class="tc gray f26 pt10">加载中...</view>
        <view class="pb30" v-for="(item, index) in data.chapters" :key="index" @click="toDetail(item)">
            {{item.title}}
	    </view>
	</view>
</template>

<script>
	import swiperPage from '@/components/mo-swiper-list/swiper-page.vue'
	import { mapActions, mapState } from 'vuex'
    import { staticURL, getBookInfo, getMixAtoc, getChapter,getABtoc } from '@/api'
	import Mixin from '@/mixin'
	export default {
		components: {
			swiperPage
		},
  		mixins:[Mixin],
		data() {
			return {
                bookid: '',
                list: [],
                data: {}
			}
		},
		computed:{
			...mapState('novel', ['userInfo']),
		},
		onLoad(option){
            // this.bookid = option.id;
            this.bookid = '575011871cd40b580e4697bc';
            this.getInfo()
		},
		onShow(){
			
		},
		methods: {
			...mapActions('novel',['getStatistics', 'getGender']),
            async getInfo(){
                const params = { 
                    bookid: this.bookid,
                    view: 'chapters',
                }
                const res = await getABtoc(params)
                console.log(res)
                res.cover = staticURL + res.cover
                // #ifdef MP-WEIXIN
                res.cover =  'https:' + res.cover
                // #endif
                this.data = res
                uni.setNavigationBarTitle({
                    title: '目录 - ' + '一念永恒'
                });
                console.log(res)
            },
            toDetail(item){
                item = item.$orig ? item.$orig : item
				const data = {
                    bookid:this.data._id,
					...item
				}
                this.router({
                    url:'/pagesub/books/book?id='+ this.bookid,
					success: function(res) {
						res.eventChannel.emit('acceptData', data)
					}
                })
            },
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
	.container {
		font-size: 28rpx;
		background: #fff;

		height: calc(100vh - constant(safe-area-inset-bottom));
		height: calc(100vh - env(safe-area-inset-bottom));
		/* #ifndef MP-WEIXIN */
		height: calc(100vh - 44px - constant(safe-area-inset-bottom));
		height: calc(100vh - 44px - env(safe-area-inset-bottom));
		/*  #endif  */
        overflow: hidden;
	}
	.books-pic{
		width: 180rpx;
		.pic{
			width: 100%;
			border-radius: 10rpx;
		}
	}
    .site{
        display: inline-block;
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        margin-top: 30rpx;
        color: #d6966a;
        background-color: #ffe7d7;
        border-radius: 50rpx 50rpx;
    }
    .cgty{
        display: inline-block;
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        margin-top: 30rpx;
        color: #999;
        background-color: #f5f5f5;
        border-radius: 50rpx 50rpx;
    }
    .start{
        display: inline-block;
        font-size: 28rpx;
        padding: 10rpx 30rpx;
        margin-top: 30rpx;
        background-color: #f5f5f5;
        border-radius: 50rpx 50rpx;
        &.go{
            color: #fff;
            background-color: $theme-color;
        }
        &.add{
            border: 1px solid $theme-color;
            color: $theme-color;
            background-color: transparent;
        }
    }
	
</style>
